import { Link, Route, NavLink, Switch, Redirect } from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import Homes from './pages/Homes';
import './App.css'

function App() {
  return (
    <div className="App">
      {/* activeClassName --- 设置类名 */}
      {/* activeStyle ---  设置样式 */}
      {/* <NavLink activeStyle={{
        color: 'blue'
      }} to="/home">首页---</NavLink>
      <NavLink activeStyle={{
        color: 'blue'
      }} to="/about">测试</NavLink> */}

      <NavLink exact to="/home">首页---</NavLink>
      <NavLink exact to="/about">测试---</NavLink>
      <NavLink exact to="/home/homes">homes</NavLink>

      {/* Route */}
      {/* path 要匹配的地址 */}
      {/* 展示视图 */}
      {/* 1. component (引入的组件名称) */}
      {/* exact  精准匹配 */}

      <Switch>
        {/* Switch 用来包裹 Route */}
        {/* <Route path="/home/homes" component={Homes} />
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} /> */}
      </Switch>


      {/* 2. render (函数) */}
      <Switch>
        <Route path="/home/homes" render={(routeProps) => {
          // 1. 通过父向子的方式传递过去
          // 2. 通过withRouter来包装当前组件
          return <div>
            <h3>我是面包屑</h3>
            Homes
            <Homes/>
            {/* <Homes { ...routeProps }/> */}
          </div>
        }} />
        <Route path="/home" render={() => {
          return <div>
            <h3>我是面包屑</h3>
            我是Home
            <Home />
          </div>
        }} />
        <Route path="/about" render={() => {
          return <div>
            <h3>我是面包屑</h3>
            我是About
            <About />
          </div>
        }} />
      </Switch>
      {/* 3. children */}
      {/* <Route path="/home">
        <div>
          1111111
        </div>
        <Home/>
      </Route>
      <Route path="/about">
        222222222
        <About/>
      </Route> */}

      <Redirect from='/' to='/home' />
    </div>
  )
}


// class Route extends React.Component {
//   render() {
//     const { path, component } = this.props
//     const Com = component
//     return <div>
//       <Com />
//     </div>
//   }
// }

export default App;
